<template>
  <div class="home">
    <!-- 轮播图部分 -->
    <el-carousel :interval="4000" type="card" height="500px" class="banner">
      <el-carousel-item v-for="(image, index) in bannerImages" :key="index">
        <el-image :src="image.src" fit="cover" class="banner-image">
          <template #placeholder>
            <div class="image-placeholder">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
        <div class="banner-content">
          <h2>{{ image.title }}</h2>
          <p>{{ image.description }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 特色功能展示 -->
    <div class="features">
      <h2 class="section-title">我们的特色</h2>
      <el-row :gutter="30">
        <el-col :span="8" v-for="(feature, index) in features" :key="index">
          <el-card class="feature-card" :body-style="{ padding: '0px' }">
            <el-image :src="feature.image" fit="cover" class="feature-image" />
            <div class="feature-content">
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最新作品展示 -->
    <div class="latest-works">
      <h2 class="section-title">最新作品</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(work, index) in latestWorks" :key="index">
          <el-card class="work-card" :body-style="{ padding: '0px' }" shadow="hover">
            <el-image :src="work.image" fit="cover" class="work-image" />
            <div class="work-info">
              <h4>{{ work.title }}</h4>
              <p>{{ work.date }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 联系我们部分 -->
    <div class="contact-section">
      <el-row :gutter="40">
        <el-col :span="12">
          <h2>开始创作你的动漫作品</h2>
          <p>加入我们，更能增添你的民族精神</p>
          <div class="button-group">
            <el-button type="primary" size="large" @click="goToGallery">
              动漫作品展示
              <el-icon class="el-icon--right"><Picture /></el-icon>
            </el-button>
            <el-button type="success" size="large" @click="goToImg2Img">
              图像风格转换
              <el-icon class="el-icon--right"><MagicStick /></el-icon>
            </el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <el-image src="/howl043.jpg" fit="cover" class="contact-image" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Picture, ArrowRight, MagicStick } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const bannerImages = [
  {
    src: '/src/images/img.png',
    title: '中华汉字',
    description: '体验博大精深'
  },
  {
    src: '/howl043.jpg',
    title: '哈尔的移动城堡',
    description: '感受奇幻的冒险之旅'
  },
  {
    src: '/totoro015.jpg',
    title: '龙猫',
    description: '重温童年的美好回忆'
  }
]

const features = [
  {
    image: '/marnie006.jpg',
    title: '文本生成图像',
    description: '使用文字描述，AI自动生成精美的动漫风格图片'
  },
  {
    image: '/mononoke049.jpg',
    title: '图像风格转换',
    description: '将您的照片转换为动漫或吉卜力风格的艺术作品'
  },
  {
    image: '/src/images/img_1.png',
    title: '汉字生成',
    description: '生成独特的艺术汉字，展现中华文化的魅力'
  }
]

const latestWorks = [
  {
    image: '/chihiro043.jpg',
    title: '千与千寻场景',
    date: '2025-03-15'
  },
  {
    image: '/howl048.jpg',
    title: '移动城堡',
    date: '2025-03-14'
  },
  {
    image: '/src/images/img_2.png',
    title: '翻来覆去',
    date: '2025-03-13'
  },
  {
    image: '/src/images/img_3.png',
    title: '两小无猜',
    date: '2025-03-12'
  }
]

const goToGallery = () => {
  router.push('/image-gallery')
}

const goToImg2Img = () => {
  router.push('/img2img')
}
</script>

<style scoped>
.home {
  padding-top: 80px;
}

.banner {
  margin-bottom: 60px;
}

.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  border-radius: 0 0 8px 8px;
}

.banner-content h2 {
  margin: 0;
  font-size: 24px;
}

.banner-content p {
  margin: 10px 0 0;
  font-size: 16px;
  opacity: 0.9;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 32px;
  color: #303133;
}

.features {
  padding: 60px 20px;
  background-color: #f5f7fa;
}

.feature-card {
  height: 100%;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-image {
  width: 100%;
  height: 200px;
}

.feature-content {
  padding: 20px;
}

.feature-content h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #303133;
}

.feature-content p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

.latest-works {
  padding: 60px 20px;
}

.work-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.work-card:hover {
  transform: translateY(-5px);
}

.work-image {
  width: 100%;
  height: 200px;
}

.work-info {
  padding: 15px;
}

.work-info h4 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #303133;
}

.work-info p {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

.contact-section {
  padding: 80px 20px;
  background-color: #f5f7fa;
  text-align: center;
}

.contact-section h2 {
  font-size: 32px;
  color: #303133;
  margin-bottom: 20px;
}

.contact-section p {
  font-size: 18px;
  color: #606266;
  margin-bottom: 30px;
}

.contact-image {
  width: 100%;
  height: 300px;
  border-radius: 8px;
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
}

.button-group {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .banner {
    height: 300px !important;
  }

  .features .el-col {
    margin-bottom: 20px;
  }

  .latest-works .el-col {
    width: 50%;
  }

  .contact-section .el-col {
    width: 100%;
  }

  .contact-image {
    margin-top: 30px;
  }
}
</style> 